import { GrafanaTheme2, PageLayoutType } from '@grafana/data';

import { Page } from '../Page/Page';
import { useStyles2 } from '@grafana/ui';
import { css } from '@emotion/css';

export function BlankNotFound() {
  const styles = useStyles2(getStyles);
  
  return (
    <Page className={styles.container} navId="home" layout={PageLayoutType.Canvas} pageNav={{ text: 'Page not found' }}>
      <div className={styles.subtitle}>未找到页面</div>

      <div className={styles.grot}>
        <img className={styles.img} src="/public/img/sec-logo.webp" width="150px" alt="grot" />
      </div>
    </Page>
  );
}


export function getStyles(theme: GrafanaTheme2) {
  return {
    img: css({
      filter: 'grayscale(100%)',
    }),
    container: css({
      display: 'flex',
      flexDirection: 'column',
      padding: theme.spacing(8, 2, 2, 2),
      h1: {
        textAlign: 'center',
      },
    }),
    subtitle: css({
      color: theme.colors.text.secondary,
      fontSize: theme.typography.h5.fontSize,
      padding: theme.spacing(2, 0),
      textAlign: 'center',
    }),
    grot: css({
      maxWidth: '450px',
      paddingTop: theme.spacing(8),
      margin: '0 auto',
    }),
  };
}
